<template>
	<view class="login-box">
		<view class="banner-box">
			<image class="login-banner" src="/static/shilu-login/banner.png"></image>
			<text class="banner-title">泽金产业数字金融</text>
			<text class="banner-sub-title">线上操作、高效及时，区块链技术加持</text>
		</view>
		<view class="form-box">
			<view class="list-cell">
				<text class="sl-tile">用户名</text>
				<input class="sl-input" v-model="userName" type="text" placeholder="请输入用户名" />
			</view>
			<view class="list-cell">
				<text class="sl-tile">密码</text>
				<input class="sl-input" v-model="password" :password="showPassword" placeholder="请输入密码" />
				<view class="show-hide-box" @tap="changePsdType()">
					<image class="show-hide-img"
						:src="showPassword?'/static/shilu-login/show.png':'/static/shilu-login/hide.png'"></image>
				</view>
			</view>
			<view class="list-cell">
				<text class="sl-tile">手机验证码</text>
				<input class="sl-input" v-model="vPhoneNum" type="text" placeholder="请输入手机验证码" />
				<text class="sl-btn" :class="(second>0 || sendBtnDis)?'disabled':''"
					@tap="openV()">{{yanzhengma}}</text>
			</view>

		</view>

		<view class="button-login" :class="loginBtnDis?'disabled':''" @tap="bindLogin()">下一步</view>

		<!-- 图形验证码 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog class="customer-dialog" ref="inputClose" type="info" title="请输入图形校验码" :before-close="true"
				confirmText="确认" @confirm="dialogInputConfirm" @close="dialogInputClose">
				<view class="dialog-box">
					<view class="dialog-item">
						<input class="dialog-input" v-model="vNum" type="text" placeholder="请输入校验码" />
						<text class="error-tip" v-show="hasError">验证码错误，请重新输入</text>
					</view>
					<view class="dialog-item" @tap="creditNum()">
						<view class="dialog-img">
							<text class="v-num" v-for="(v,idx) in vCodeList" :key="idx"
								:style="{color:vCodeColor[idx]}">{{v}}</text>
						</view>
						<view class="img-refresh">看不清，换一张</view>
					</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>

		<!-- 首次登录提示 -->
		<uni-popup ref="firstLoginDialog" type="dialog">
			<uni-popup-dialog class="customer-dialog my-no-btn-dialog" type="info" title="温馨提示">
				<view class="customer-dialog-cont">
					<view class="customer-dialog-text">
						欢迎您使用本小程序，为了保障您的账户安全，请更改您的初始密码！
					</view>
					<view class="change-pwd-btn" @tap="toChangePwd">
						<text>修改初始密码</text>
					</view>
					<view class="direct-login-btn" @tap="toLogin">
						<text>不用了，我要直接登录</text>
					</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import request from "../../request/request.js"
	var _this, js;
	export default {
		data() {
			return {
				userName: '',
				password: '',
				vPhoneNum: '',
				vCodes: '1234567890',
				vCodeList: ['2', '3', '4', '5'],
				vCodeColor: [],
				vCode: '2345',
				hasError: false,
				vNum: '',
				sendPhoneCode: '获取手机验证码',
				second: -1,
				showPassword: true,
				isFirst: true
			};
		},
		onLoad() {
			_this = this;

		},
		onUnload() {
			clearInterval(js)
			this.second = -1;
			this.clear()
		},
		beforeUnmount() {
			clearInterval(js)
			this.second = -1;
			this.clear()
		},
		computed: {
			yanzhengma() {
				if (this.second == -1) {
					return '获取手机验证码';
				} else if (this.second == 0) {
					return '重新发送';
				} else {
					if (this.second < 10) {
						return '0' + this.second + 'S';
					} else {
						return this.second + 'S';
					}
				}
			},
			loginBtnDis() {
				return !this.userName || !this.password || !this.vPhoneNum
			},
			sendBtnDis() {
				return !this.userName || !this.password
			}

		},
		methods: {
			changePsdType() {
				this.showPassword = !this.showPassword;
			},
			clear() {
				clearInterval(js)
				js = null
				this.second = 0
			},
			randomNum(min, max) {
				return Math.floor(Math.random() * (max - min) + min)
			},
			randomColor(min, max) {
				const r = this.randomNum(min, max);
				const g = this.randomNum(min, max);
				const b = this.randomNum(min, max);
				return `rgba(${r},${g},${b},1)`
			},
			creditNum() {
				this.vCodeList = [];
				this.vCodeColor = [];
				for (let i = 0; i < 4; i++) {
					this.vCodeList.push(this.vCodes[this.randomNum(0, this.vCodes.length)])
					this.vCodeColor.push(this.randomColor(10, 200))
				}
				this.vCode = this.vCodeList.join('')
			},
			openV() {
				if (this.second > 0 || this.sendBtnDis) {
					return;
				}
				this.vNum = '';
				this.vCode = '';
				this.hasError = false;
				this.$refs.inputDialog.open();
				this.creditNum()
			},
			dialogInputConfirm() {
				if (this.vNum != this.vCode) {
					this.hasError = true
				} else {
					this.hasError = false
					this.$refs.inputDialog.close();
					if (this.second > 0) {
						return;
					}
					this.second = 60;
					//请求业务
					js = setInterval(() => {
						_this.second--;
						if (_this.second == 0) {
							_this.clear()
						}
					}, 1000)
				}
			},
			dialogInputClose() {
				this.$refs.inputDialog.close();
			},
			bindLogin() {
				if (this.loginBtnDis) {
					return
				}
				if (!this.userName) {
					uni.showToast({
						icon: 'none',
						title: '用户名不能为空!'
					});
					return;
				}
				if (!this.password) {
					uni.showToast({
						icon: 'none',
						title: '密码不能为空!'
					});
					return;
				}
				if (!this.vPhoneNum) {
					uni.showToast({
						icon: 'none',
						title: '手机验证码不能为空!'
					});
					return;
				}

				//运营端
				if (this.userName.indexOf('admin') > -1) {
					uni.redirectTo({
						url: '/pages/oms/index'
					});
				} else { //企业端
					//判断是否需要首次修改密码
					if (this.isFirst) {
						this.$refs.firstLoginDialog.open()
					} else {
						uni.redirectTo({
							url: '/pages/clt/index'
						});
					}
				}


				//
				// request.request({
				// 	url: '/api/login/login',
				// 	data: {
				// 		loginName: this.phone,
				// 		password: this.password
				// 	},
				// 	method: 'POST',
				// 	dataType: 'json',
				// }).then(res => {
				// 	if (res.data.code != 200) {
				// 		uni.showToast({
				// 			title: res.data.msg,
				// 			icon: 'none'
				// 		});
				// 	} else {
				// 		//成功后的逻辑
				// 		uni.navigateBack();
				// 	}
				// });
			},
			toChangePwd() {
				this.$refs.firstLoginDialog.close()
				uni.navigateTo({
					url: '/pages/login/changePwd'
				});
			},
			toLogin() {
				this.$refs.firstLoginDialog.close()
				uni.redirectTo({
					url: '/pages/faceIdentification/faceIdentification'
				});
			}
		}
	}
</script>

<style>
	.login-box {
		width: 100%;
		height: 100%;
		background-color: #F8F9Fc;

	}

	.banner-box {
		width: 100%;
		text-align: center;
		position: relative;
	}

	.banner-title {
		position: absolute;
		left: 58rpx;
		top: 109rpx;
		font-family: SJzongyi120-Regular;
		font-size: 42rpx;
		color: #002E7C;
		font-weight: 400;
	}

	.banner-sub-title {
		position: absolute;
		left: 58rpx;
		top: 175rpx;
		ont-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #002E7C;
		letter-spacing: 0;
		line-height: 44rpx;
		font-weight: 400;
	}

	.login-banner {
		margin: 20rpx auto;
		width: 702rpx;
		height: 282rpx;
	}

	.form-box {
		display: flex;
		flex-direction: column;
		padding: 27rpx 30rpx 20rpx;
		background-color: #FFFFFF;
	}

	.list-cell {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 96rpx;
		color: #333333;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.sl-tile {
		width: 208rpx;
		font-family: PingFangSC-Regular;
		font-size: 32rpx;
		color: #333333;
		letter-spacing: 0;
		font-weight: 400;
	}

	.list-cell .sl-input {
		flex: 1;
		text-align: left;
		font-size: 32rpx;
	}

	.sl-btn {
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 24rpx;
		font-weight: 400;
		background: #315EFB;
		border-radius: 8rpx;
		padding: 16rpx 0;
		width: 210rpx;
	}

	.show-hide-box {
		width: 80rpx;
		height: 96rpx;
		text-align: center;
	}

	.show-hide-img {
		width: 48rpx;
		height: 48rpx;
		margin-top: 30rpx;
	}

	/* .sl-btn.disabled {
		opacity: .6;
	} */

	.button-login {
		color: #FFFFFF;
		font-size: 32rpx;
		width: 670rpx;
		height: 98rpx;
		line-height: 98rpx;
		background: #315EFB;
		border-radius: 49rpx;
		text-align: center;
		margin: 206rpx auto 0;

	}

	.disabled {
		opacity: 0.6;
	}

	.dialog-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 60rpx;
		margin-top: 20rpx;
	}

	.dialog-item {
		position: relative;
	}

	.error-tip,
	.img-refresh {
		position: absolute;
		font-family: PingFangTC-Regular;
		font-size: 24rpx;
		line-height: 24rpx;
		font-weight: 400;
		top: 100rpx;
	}

	.error-tip {
		color: #FF3B30;
		left: 30rpx;
	}

	.img-refresh {
		color: #000000;
		text-align: right;
		width: 100%;
	}

	.dialog-input {
		width: 240rpx;
		height: 90rpx;
		background: #F8F9FC;
		border-radius: 8rpx;
		padding-left: 20rpx;
	}

	.dialog-img {
		width: 160rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: #F8F9FC;
		border-radius: 8rpx;
		margin-left: 20rpx;
		text-align: center;

	}

	.v-num {
		font-family: SimSong-Regular;
		font-size: 56rpx;
		letter-spacing: 0;
		font-weight: 400;
	}

	.customer-dialog-cont {
		display: flex;
		flex-direction: column;
		padding: 0 18rpx;
	}

	.customer-dialog-text {
		font-family: PingFangSC-Regular;
		font-size: 32rpx;
		color: #666666;
		letter-spacing: 0;
		font-weight: 400;
	}

	.change-pwd-btn {
		width: 335rpx;
		height: 98rpx;
		line-height: 98rpx;
		background: #315EFB;
		border-radius: 49rpx;
		font-family: PingFangSC-Regular;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		margin: 44rpx auto 0;
		font-weight: 400;
	}

	.direct-login-btn {
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #666666;
		text-align: center;
		font-weight: 400;
		margin: 55rpx auto 72rpx;

	}
</style>